class Enlarge
{
    constructor(el){
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        
        this.init()
    }
    init(){
        this.overOut()
        this.enlargeWH()
        this.maskMove()
    }
    maskMove(){
        this.imgObj.onmousemove =(evt)=>{
            let e = evt||window.event
            let left = e.pageX - this.imgObj.parentNode.offsetLeft - this.maskObj.offsetWidth/2
            let top = e.pageY-this.imgObj.parentNode.offsetTop- this.maskObj.offsetHeight/2
            //imgobj的父元素有定位 所以offsetleft是相对于父元素为0
            // let left2 = e.pageX - this.imgObj.offsetLeft - this.maskObj.offsetWidth/2
            // console.log(this.imgObj.parentNode.offsetLeft,this.imgObj.offsetLeft)
            if(left<0) left=0
            if(top<0) top=0
            let maxLeft = this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let maxTop = this.imgObj.offsetHeight-this.maskObj.offsetHeight
            if (left>maxLeft) left = maxLeft
            if (top>maxTop) top = maxTop
            this.maskObj.style.left = left + 'px'
            this.maskObj.style.top = top+'px'

            this.enlargeBg(left,top)
        }

    }
    enlargeBg(left,top){
        let enlargeW = parseFloat(this.getStyle(this.enlargeObj, 'width'))
        let enlargeH = parseFloat(this.getStyle(this.enlargeObj, 'height'))
        //console.log(enlargeW)
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
        let x = (enlargeW/maskW) * left
        let y = (enlargeH/maskH) * top

        this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
    }
    overOut(){
        this.imgObj.onmouseover=()=>{
           this.maskObj.style.display=this.enlargeObj.style.display='block'
        }
        this.imgObj.onmouseout=()=>{
           this.maskObj.style.display=this.enlargeObj.style.display='none'
        }
    }
    getStyle(tagObj,attrName){
        if(window.getComputedStyle){
            return window.getComputedStyle(tagObj)[attrName]
        } else {
            return tagObj.currentStyle[attrName]
        }
    }
    enlargeWH(){
        //大图=小mask*(大图背景/小图背景)
        let maskW = parseInt(this.getStyle(this.maskObj,'width'))
        let maskH = parseInt(this.getStyle(this.maskObj,'height'))
        let enlarge = this.getStyle(this.enlargeObj, 'background-size')
        let enlargeW = parseInt( enlarge.split(' ')[0])
        let enlargeH = parseInt( enlarge.split(' ')[1])
        let imgW = this.imgObj.clientWidth
        let imgH = this.imgObj.clientWidth
        this.enlargeObj.style.width = maskW*(enlargeW/imgW)
        this.enlargeObj.style.height = maskH*(enlargeH/imgH)
    }
}